<script setup lang="ts">
import { ref } from 'vue'
import { getColumns } from './config/config'
import { VueDraggable } from 'vue-draggable-plus'
import { Message } from '@arco-design/web-vue'
import emitter from '@/utils/mitt'
const columns = getColumns({
  originColumns: false,
})
// 排序的列表
const sortColumns = ref(
  columns.map((item) => {
    return {
      dataIndex: item.dataIndex,
      title: item.title,
    }
  })
)
const reset = () => {
  const originColumns = getColumns({
    originColumns: true,
  })
  sortColumns.value = originColumns.map((item) => {
    return {
      dataIndex: item.dataIndex,
      title: item.title,
    }
  })
  localStorage.removeItem('tableSort')
  Message.success('重置成功')
  emitter.emit('renderTable')
}
const save = () => {
  localStorage.setItem('tableSort', JSON.stringify(sortColumns.value))
  Message.success('保存成功')
  emitter.emit('renderTable')
}
</script>

<template>
  <div class="setting-container">
    <div class="columns-setting">
      <div class="columns-setting-title">列表排序</div>
      <div class="columns-container">
        <VueDraggable
          v-model="sortColumns"
          class="columns-setting-tags"
          :animation="150"
        >
          <a-tag
            class="columns-setting-tag"
            v-for="item of sortColumns"
            :key="item.dataIndex"
            size="large"
            bordered
          >
            {{ item.title }}
          </a-tag>
        </VueDraggable>
        <div class="columns-setting-buttons">
          <a-button type="primary" status="danger" @click="reset">
            重置
          </a-button>
          <a-button class="ml12" type="primary" @click="save">保存</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.setting-container {
  padding: 20px;
}
.columns-setting {
  .columns-container {
    display: inline-block;
    margin-top: 10px;
    border: 1px solid var(--color-border-2);
    padding: 20px;
  }
  .columns-setting-title {
    font-size: 14px;
    font-weight: 600;
  }
  .columns-setting-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    .columns-setting-tag {
      cursor: pointer;
    }
  }
  .columns-setting-buttons {
    display: inline-block;
    margin-top: 12px;
  }
}
</style>
